<script setup lang="ts">
import { ref } from 'vue'
import Header from '@/components/common/Header.vue'
import LText from '@/components/LText.vue'
import ComponentsList from '@/components/ComponentsList.vue'
import { defaultTextTemplates } from '@/assets/component/defaultTextTemplates'

const templateData = ref({
  _id: '64439a53dbbb847082c9d57b',
  isTemplate: false,
  copiedCount: 0,
  status: 1,
  channels: [],
  user: '63ad56199c26fb70880a8663',
  author: '18050523702',
  uuid: 'O4qtOU',
  coverImg: 'https://static.imooc-lego.com/upload-files/screenshot-889755.png',
  title: '前端架构师直播海报-复制',
  desc: '未命名作品',
  content: {
    components: [
      {
        name: 'l-text',
        props: {
          text: '如何突破前端成长瓶颈？',
          fontSize: '25px',
          fontFamily: '"SimHei","STHeiti"',
          fontWeight: 'bold',
          fontStyle: 'normal',
          textDecoration: 'none',
          lineHeight: '1',
          textAlign: 'center',
          color: '#ffffff',
          backgroundColor: '',
          actionType: '',
          url: '',
          height: '32px',
          width: '278px',
          paddingLeft: '0px',
          paddingRight: '0px',
          paddingTop: '0px',
          paddingBottom: '0px',
          borderStyle: 'none',
          borderColor: '#000',
          borderWidth: '0',
          borderRadius: '0',
          boxShadow: '0 0 0 #000000',
          opacity: 1,
          position: 'absolute',
          left: '54.5px',
          top: '79px',
          right: '0',
          tag: 'h2'
        },
        id: '6c81b087-5e03-4012-b4db-96a6a7b7788d',
        layerName: '图层1'
      },
      {
        name: 'l-text',
        props: {
          text: '三位大厂架构师，为你制定职业晋级方案',
          fontSize: '14px',
          fontFamily: '"SimHei","STHeiti"',
          fontWeight: 'normal',
          fontStyle: 'normal',
          textDecoration: 'none',
          lineHeight: '1',
          textAlign: 'center',
          color: '#ffffff',
          backgroundColor: '',
          actionType: '',
          url: '',
          height: '26px',
          width: '261.5px',
          paddingLeft: '0px',
          paddingRight: '0px',
          paddingTop: '0px',
          paddingBottom: '0px',
          borderStyle: 'none',
          borderColor: '#000',
          borderWidth: '0',
          borderRadius: '0',
          boxShadow: '0 0 0 #000000',
          opacity: 1,
          position: 'absolute',
          left: '57px',
          top: '143px',
          right: '0',
          tag: 'p'
        },
        id: '9749472f-9a24-41bd-8fde-74b9dc8eef50',
        layerName: '图层2'
      },
      {
        name: 'l-text',
        props: {
          text: '传道：前端架构设计原则和思路\n授业：全方位了解前端知识体系\n解惑：技术更新快，该如何应对\n目标：打破职业瓶颈，冲击大厂',
          fontSize: '13px',
          fontFamily: '',
          fontWeight: 'normal',
          fontStyle: 'normal',
          textDecoration: 'none',
          lineHeight: '2',
          textAlign: 'left',
          color: '#000000',
          backgroundColor: '',
          actionType: '',
          url: '',
          height: '127px',
          width: '210.5px',
          paddingLeft: '0px',
          paddingRight: '0px',
          paddingTop: '0px',
          paddingBottom: '0px',
          borderStyle: 'none',
          borderColor: '#000',
          borderWidth: '0',
          borderRadius: '0',
          boxShadow: '0 0 0 #000000',
          opacity: 1,
          position: 'absolute',
          left: '47px',
          top: '265px',
          right: '0',
          tag: 'p'
        },
        id: '5e5e9f67-775c-4413-87fe-01d958c9edda',
        layerName: '图层3'
      },
      {
        name: 'l-text',
        props: {
          text: '直播内容',
          fontSize: '15px',
          fontFamily: '',
          fontWeight: 'bold',
          fontStyle: 'normal',
          textDecoration: 'none',
          lineHeight: '1',
          textAlign: 'center',
          color: '#ffffff',
          backgroundColor: '',
          actionType: '',
          url: '',
          height: '21px',
          width: '79.5px',
          paddingLeft: '0px',
          paddingRight: '0px',
          paddingTop: '0px',
          paddingBottom: '0px',
          borderStyle: 'none',
          borderColor: '#000',
          borderWidth: '0',
          borderRadius: '0',
          boxShadow: '0 0 0 #000000',
          opacity: 1,
          position: 'absolute',
          left: '30.5px',
          top: '208px',
          right: '0',
          tag: 'h2'
        },
        id: '1c273418-b80e-4194-9aa0-518f56d5aa69',
        layerName: '图层4'
      },
      {
        name: 'l-text',
        props: {
          text: '关注本直播\n收获会很多',
          fontSize: '13px',
          fontFamily: '',
          fontWeight: 'normal',
          fontStyle: 'normal',
          textDecoration: 'none',
          lineHeight: '1.3',
          textAlign: 'center',
          color: '#000000',
          backgroundColor: '',
          actionType: '',
          url: '',
          height: '33px',
          width: '89.5px',
          paddingLeft: '0px',
          paddingRight: '0px',
          paddingTop: '0px',
          paddingBottom: '0px',
          borderStyle: 'none',
          borderColor: '#000',
          borderWidth: '0',
          borderRadius: '0',
          boxShadow: '0 0 0 #000000',
          opacity: 1,
          position: 'absolute',
          left: '257.5px',
          top: '308px',
          right: '0',
          tag: 'p'
        },
        id: '328fea31-efcd-4379-a34c-e0a0d25ae2cd',
        layerName: '图层5'
      },
      {
        name: 'l-image',
        props: {
          imageSrc:
            'http://static.imooc-lego.com/upload-files/%E4%BA%8C%E7%BB%B4%E7%A0%81-663565.png',
          actionType: '',
          url: '',
          height: '47px',
          width: '52px',
          paddingLeft: '0px',
          paddingRight: '0px',
          paddingTop: '0px',
          paddingBottom: '0px',
          borderStyle: 'none',
          borderColor: '#000',
          borderWidth: '0',
          borderRadius: '0',
          boxShadow: '0 0 0 #000000',
          opacity: 1,
          position: 'absolute',
          left: '277.5px',
          top: '351px',
          right: '0'
        },
        id: '2492b2cf-29ef-4d1d-8bcd-7480ed7effb5',
        layerName: '图层6'
      },
      {
        name: 'l-image',
        props: {
          imageSrc: 'http://static.imooc-lego.com/upload-files/%E5%A4%B4%E5%83%8F1-508783.png',
          actionType: '',
          url: '',
          height: '50px',
          width: '50px',
          paddingLeft: '0px',
          paddingRight: '0px',
          paddingTop: '0px',
          paddingBottom: '0px',
          borderStyle: 'none',
          borderColor: '#000',
          borderWidth: '0',
          borderRadius: '0',
          boxShadow: '0 0 0 #000000',
          opacity: 1,
          position: 'absolute',
          left: '50.5px',
          top: '487px',
          right: '0'
        },
        id: '543e33ba-6b31-485f-a4dd-34a3f42c5060',
        layerName: '图层7'
      },
      {
        name: 'l-image',
        props: {
          imageSrc: 'http://static.imooc-lego.com/upload-files/%E5%A4%B4%E5%83%8F2-687396.png',
          actionType: '',
          url: '',
          height: '50px',
          width: '50px',
          paddingLeft: '0px',
          paddingRight: '0px',
          paddingTop: '0px',
          paddingBottom: '0px',
          borderStyle: 'none',
          borderColor: '#000',
          borderWidth: '0',
          borderRadius: '0',
          boxShadow: '0 0 0 #000000',
          opacity: 1,
          position: 'absolute',
          left: '160.5px',
          top: '489px',
          right: '0'
        },
        id: '21e4ab04-6405-4311-b9ae-fa6bb1cf0bb4',
        layerName: '图层8'
      },
      {
        name: 'l-image',
        props: {
          imageSrc: 'http://static.imooc-lego.com/upload-files/%E5%A4%B4%E5%83%8F3-647737.png',
          actionType: '',
          url: '',
          height: '50px',
          width: '50px',
          paddingLeft: '0px',
          paddingRight: '0px',
          paddingTop: '0px',
          paddingBottom: '0px',
          borderStyle: 'none',
          borderColor: '#000',
          borderWidth: '0',
          borderRadius: '0',
          boxShadow: '0 0 0 #000000',
          opacity: 1,
          position: 'absolute',
          left: '271px',
          top: '489px',
          right: '0'
        },
        id: '2ced14a5-e258-4aa4-b432-743697f3b6d6',
        layerName: '图层9'
      },
      {
        name: 'l-text',
        props: {
          text: 'Sam',
          fontSize: '17px',
          fontFamily: '',
          fontWeight: 'bold',
          fontStyle: 'normal',
          textDecoration: 'none',
          lineHeight: '1',
          textAlign: 'center',
          color: '#000000',
          backgroundColor: '',
          actionType: '',
          url: '',
          height: '36px',
          width: '125px',
          paddingLeft: '0px',
          paddingRight: '0px',
          paddingTop: '0px',
          paddingBottom: '0px',
          borderStyle: 'none',
          borderColor: '#000',
          borderWidth: '0',
          borderRadius: '0',
          boxShadow: '0 0 0 #000000',
          opacity: 1,
          position: 'absolute',
          left: '121px',
          top: '543px',
          right: '0',
          tag: 'h2'
        },
        id: 'f199e1d1-e421-40e0-b57c-6167f3cc3c01',
        layerName: '图层10'
      },
      {
        name: 'l-text',
        props: {
          text: '双越',
          fontSize: '17px',
          fontFamily: '',
          fontWeight: 'bold',
          fontStyle: 'normal',
          textDecoration: 'none',
          lineHeight: '1',
          textAlign: 'center',
          color: '#000000',
          backgroundColor: '',
          actionType: '',
          url: '',
          height: '36px',
          width: '125px',
          paddingLeft: '0px',
          paddingRight: '0px',
          paddingTop: '0px',
          paddingBottom: '0px',
          borderStyle: 'none',
          borderColor: '#000',
          borderWidth: '0',
          borderRadius: '0',
          boxShadow: '0 0 0 #000000',
          opacity: 1,
          position: 'absolute',
          left: '12px',
          top: '543px',
          right: '0',
          tag: 'h2'
        },
        id: '2313d1fb-fecf-4891-87b2-f6c6735aabfd',
        layerName: '图层10副本'
      },
      {
        name: 'l-text',
        props: {
          text: '张轩',
          fontSize: '17px',
          fontFamily: '',
          fontWeight: 'bold',
          fontStyle: 'normal',
          textDecoration: 'none',
          lineHeight: '1',
          textAlign: 'center',
          color: '#000000',
          backgroundColor: '',
          actionType: '',
          url: '',
          height: '36px',
          width: '125px',
          paddingLeft: '0px',
          paddingRight: '0px',
          paddingTop: '0px',
          paddingBottom: '0px',
          borderStyle: 'none',
          borderColor: '#000',
          borderWidth: '0',
          borderRadius: '0',
          boxShadow: '0 0 0 #000000',
          opacity: 1,
          position: 'absolute',
          left: '233px',
          top: '546px',
          right: '0',
          tag: 'h2'
        },
        id: '244049bb-8861-4996-b71f-476eb4295dfc',
        layerName: '图层10副本'
      },
      {
        name: 'l-text',
        props: {
          text: '骨灰级架构专家',
          fontSize: '12px',
          fontFamily: '',
          fontWeight: 'normal',
          fontStyle: 'normal',
          textDecoration: 'none',
          lineHeight: '1',
          textAlign: 'center',
          color: '#000000',
          backgroundColor: '',
          actionType: '',
          url: '',
          height: '36px',
          width: '92.5px',
          paddingLeft: '0px',
          paddingRight: '0px',
          paddingTop: '0px',
          paddingBottom: '0px',
          borderStyle: 'none',
          borderColor: '#000',
          borderWidth: '0',
          borderRadius: '0',
          boxShadow: '0 0 0 #000000',
          opacity: 1,
          position: 'absolute',
          left: '253px',
          top: '572px',
          right: '0',
          tag: 'p'
        },
        id: '53b15856-f220-4131-aa63-78bf0f9cc46d',
        layerName: '图层13'
      },
      {
        name: 'l-text',
        props: {
          text: '资深架构师PMP',
          fontSize: '12px',
          fontFamily: '',
          fontWeight: 'normal',
          fontStyle: 'normal',
          textDecoration: 'none',
          lineHeight: '1',
          textAlign: 'center',
          color: '#000000',
          backgroundColor: '',
          actionType: '',
          url: '',
          height: '36px',
          width: '92.5px',
          paddingLeft: '0px',
          paddingRight: '0px',
          paddingTop: '0px',
          paddingBottom: '0px',
          borderStyle: 'none',
          borderColor: '#000',
          borderWidth: '0',
          borderRadius: '0',
          boxShadow: '0 0 0 #000000',
          opacity: 1,
          position: 'absolute',
          left: '27.5px',
          top: '571px',
          right: '0',
          tag: 'p'
        },
        id: '2d6441fd-3abb-488f-aeb7-d559b7e9973c',
        layerName: '图层13副本'
      },
      {
        name: 'l-text',
        props: {
          text: 'BAT大型架构师',
          fontSize: '12px',
          fontFamily: '',
          fontWeight: 'normal',
          fontStyle: 'normal',
          textDecoration: 'none',
          lineHeight: '1',
          textAlign: 'center',
          color: '#000000',
          backgroundColor: '',
          actionType: '',
          url: '',
          height: '36px',
          width: '92.5px',
          paddingLeft: '0px',
          paddingRight: '0px',
          paddingTop: '0px',
          paddingBottom: '0px',
          borderStyle: 'none',
          borderColor: '#000',
          borderWidth: '0',
          borderRadius: '0',
          boxShadow: '0 0 0 #000000',
          opacity: 1,
          position: 'absolute',
          left: '138.5px',
          top: '571px',
          right: '0',
          tag: 'p'
        },
        id: '3580f864-bc30-491e-94c0-02cfa5d96064',
        layerName: '图层13副本'
      },
      {
        name: 'l-image',
        props: {
          imageSrc: 'http://static.imooc-lego.com/upload-files/LOGO-517038.png',
          actionType: '',
          url: '',
          height: '25px',
          width: '100px',
          paddingLeft: '0',
          paddingRight: '0px',
          paddingTop: '0px',
          paddingBottom: '0px',
          borderStyle: 'none',
          borderColor: '#000',
          borderWidth: '0',
          borderRadius: '0',
          boxShadow: '0 0 0 #000000',
          opacity: 1,
          position: 'absolute',
          left: '13px',
          top: '19px',
          right: '0'
        },
        id: 'a407a673-00cb-4ffb-b04b-d41b1eeaccce',
        layerName: '图层16'
      },
      {
        name: 'l-image',
        props: {
          imageSrc: 'http://static.imooc-lego.com/upload-files/%E7%9F%A9%E5%BD%A2-117418.png',
          actionType: '',
          url: '',
          height: '',
          width: '300px',
          paddingLeft: '0px',
          paddingRight: '0px',
          paddingTop: '0px',
          paddingBottom: '0px',
          borderStyle: 'none',
          borderColor: '#000',
          borderWidth: '0',
          borderRadius: '0',
          boxShadow: '0 0 0 #000000',
          opacity: 1,
          position: 'absolute',
          left: '36px',
          top: '137px',
          right: '0'
        },
        id: 'b35d5ff0-5e09-4dfd-a6c8-77dd57f7eb09',
        layerName: '图层17'
      },
      {
        name: 'l-shape',
        props: {
          backgroundColor: '#1890ff',
          actionType: '',
          url: '',
          height: '6px',
          width: '6px',
          paddingLeft: '0px',
          paddingRight: '0px',
          paddingTop: '0px',
          paddingBottom: '0px',
          borderStyle: 'solid',
          borderColor: '#1890ff',
          borderWidth: '1px',
          borderRadius: '27px',
          boxShadow: '0 0 0 #000000',
          opacity: 1,
          position: 'absolute',
          left: '34px',
          top: '351px',
          right: '0'
        },
        id: '362f490f-a7aa-4c12-bb52-97edc6445452',
        layerName: '图层18'
      },
      {
        name: 'l-shape',
        props: {
          backgroundColor: '#1890ff',
          actionType: '',
          url: '',
          height: '6px',
          width: '6px',
          paddingLeft: '0px',
          paddingRight: '0px',
          paddingTop: '0px',
          paddingBottom: '0px',
          borderStyle: 'solid',
          borderColor: '#1890ff',
          borderWidth: '1px',
          borderRadius: '27px',
          boxShadow: '0 0 0 #000000',
          opacity: 1,
          position: 'absolute',
          left: '34px',
          top: '275px',
          right: '0'
        },
        id: '4ab79f5e-6f31-4e5c-bfc0-a3b100286193',
        layerName: '图层18副本'
      },
      {
        name: 'l-shape',
        props: {
          backgroundColor: '#1890ff',
          actionType: '',
          url: '',
          height: '6px',
          width: '6px',
          paddingLeft: '0px',
          paddingRight: '0px',
          paddingTop: '0px',
          paddingBottom: '0px',
          borderStyle: 'solid',
          borderColor: '#1890ff',
          borderWidth: '1px',
          borderRadius: '27px',
          boxShadow: '0 0 0 #000000',
          opacity: 1,
          position: 'absolute',
          left: '34px',
          top: '301px',
          right: '0'
        },
        id: '408942ee-b2c4-4659-911a-6dcd5ea19f67',
        layerName: '图层18副本'
      },
      {
        name: 'l-shape',
        props: {
          backgroundColor: '#1890ff',
          actionType: '',
          url: '',
          height: '6px',
          width: '6px',
          paddingLeft: '0px',
          paddingRight: '0px',
          paddingTop: '0px',
          paddingBottom: '0px',
          borderStyle: 'solid',
          borderColor: '#1890ff',
          borderWidth: '1px',
          borderRadius: '27px',
          boxShadow: '0 0 0 #000000',
          opacity: 1,
          position: 'absolute',
          left: '34px',
          top: '327px',
          right: '0'
        },
        id: '903a3698-63d2-4027-95c9-d2ffc320ab35',
        layerName: '图层18副本'
      }
    ],
    __v: 0,
    props: {
      backgroundColor: '#ffffff',
      backgroundImage:
        "url('http://static.imooc-lego.com/upload-files/%E6%B5%B7%E6%8A%A5%E8%83%8C%E6%99%AF%402x-761456.png')",
      backgroundRepeat: 'no-repeat',
      backgroundSize: 'cover',
      height: '667.2597864768684px'
    }
  },
  createdAt: '2023-04-22T08:26:59.492Z',
  updatedAt: '2023-04-22T08:26:59.492Z',
  id: 5149,
  __v: 0
})

const materialTabKey = ref('1')

const canvasExtraBtnDisable = ref({
  0: false,
  1: true,
  2: true
})
const ShortcutKeyModalVisible = ref(false)
const showShortKeyModal = () => {
  ShortcutKeyModalVisible.value = true
}
const canvasComponentList = ref({
  'l-text': LText,
  'l-image': '',
  'l-shape': ''
})

const configTabKey = ref('1')
</script>

<template>
  <a-layout>
    <Header>
      <template #logo>
        <a class="logo-wrapper" href="/">
          <img
            src=""
            alt=""
            srcset=""
          />
          {{ templateData.title }}
        </a>
      </template>
      <template #user>
        <div class="btn-line">
          <a-button type="primary" shape="round">预览和设置</a-button>
          <a-button type="primary" shape="round">保存</a-button>
          <a-button type="primary" shape="round">发布</a-button>
          <a-button shape="round">登录</a-button>
        </div>
      </template>
    </Header>
    <a-layout-content>
      <a-row class="wrapper" type="flex">
        <a-col class="material-panel" flex="300px">
          <a-tabs v-model:activeKey="materialTabKey" size="large">
            <a-tab-pane key="1">
              <template #tab>
                <i class="iconfont icon-string"></i>
                文本
              </template>
              <ComponentsList :list="defaultTextTemplates"></ComponentsList>
            </a-tab-pane>
            <a-tab-pane key="2">
              <template #tab>
                <i class="iconfont icon-tupian"></i>
                图片
              </template>
              图片
            </a-tab-pane>
            <a-tab-pane key="3">
              <template #tab>
                <i class="iconfont icon-tetris02"></i>
                形状
              </template>
              形状
            </a-tab-pane>
          </a-tabs>
        </a-col>
        <a-col class="canvas-panel" flex="auto">
          <div class="extra-btn">
            <a-tooltip>
              <template #title>快捷键提示</template>
              <a-button
                shape="circle"
                :disabled="canvasExtraBtnDisable[0]"
                @click="showShortKeyModal"
              >
                <template #icon>
                  <i class="iconfont icon-question"></i>
                </template>
              </a-button>
            </a-tooltip>
            <a-tooltip>
              <template #title>撤销</template>
              <a-button shape="circle" :disabled="canvasExtraBtnDisable[1]">
                <template #icon>
                  <i class="iconfont icon-acrotate"></i>
                </template>
              </a-button>
            </a-tooltip>
            <a-tooltip>
              <template #title>重做</template>
              <a-button shape="circle" :disabled="canvasExtraBtnDisable[2]">
                <template #icon>
                  <i class="iconfont icon-cwrotate"></i>
                </template>
              </a-button>
            </a-tooltip>
            <a-modal
              v-model:visible="ShortcutKeyModalVisible"
              title="快捷键操作"
              :footer="null"
              dialogClass="shortcut-key-modal"
            >
              <p>Some contents...</p>
              <p>Some contents...</p>
              <p>Some contents...</p>
            </a-modal>
          </div>
          <div class="title">画布区域</div>
          <div class="canvas-content">
            <!-- TODO 这个component.name 的类型要搞一下 -->
            <component
              v-for="component in templateData.content.components"
              :is="canvasComponentList[component.name as 'l-text' | 'l-image' | 'l-shape']"
              :key="component.id"
              v-bind="component.props"
            >
            </component>
          </div>
        </a-col>
        <a-col class="config-panel" flex="300px">
          <a-tabs v-model:activeKey="configTabKey" type="card">
            <a-tab-pane key="1" tab="属性设置">
              <a-empty>
                <template #description> 在画布中选择元素并开始编辑 </template>
              </a-empty>
            </a-tab-pane>
            <a-tab-pane key="2" tab="图层设置">图层设置Content</a-tab-pane>
            <a-tab-pane key="3" tab="页面设置">页面设置Content</a-tab-pane>
          </a-tabs>
        </a-col>
      </a-row>
    </a-layout-content>
  </a-layout>
</template>

<style scoped lang="scss">
@import '@/assets/styles/mixin.scss';

.header {
  .logo-wrapper {
    color: #fff;
    font-size: 16px;

    img {
      width: 45px;
      margin-right: 20px;
    }
  }

  .btn-line {
    .ant-btn {
      margin-right: 30px;
    }
  }
}

.ant-layout-content {
  // 64px header height
  height: calc(100vh - 64px);

  .wrapper {
    height: 100%;

    .ant-col {
      height: 100%;
    }

    .material-panel {
      background-color: #fff;
      padding-top: 20px;
      position: relative;
      height: 100%;

      :deep(.ant-tabs-nav-wrap) {
        justify-content: center;
      }

      .iconfont {
        margin-right: 5px;
      }
    }

    .canvas-panel {
      position: relative;
      padding-top: 20px;

      .extra-btn {
        position: absolute;
        right: 20px;
        top: 20px;

        .ant-btn {
          margin-right: 15px;
        }
      }

      .title {
        text-align: center;
        font-size: 18px;
      }

      .canvas-content {
        margin-top: 50px;
        width: 375px;
        height: 600px;
        background: #fff;
        @include marginCenter($direction: 'horizon');
        position: relative;
      }
    }

    .config-panel {
      background-color: #fff;
    }
  }
}
</style>
